<template>
    <div class="banner" :style="{
        backgroundColor: config.pageConfig.color,
    }">
        <div :style="{
                marginTop: config.pageConfig.marginTop + 'px',
                marginBottom: config.pageConfig.marginBottom + 'px',
                marginLeft: config.pageConfig.margin + 'px',
                marginRight: config.pageConfig.margin + 'px',
            }">
            <div class="img">
                <div :class="config.pageConfig.custom == '1' ? 'style-1' : 'style-2'" class="banner-container">
                    <div v-for="(item, idx) in config.pageConfig.imgList" :key="idx">
                        <div :style="{
                                margin: config.pageConfig.marginImg + 'px',
                                borderTopLeftRadius: config.pageConfig.radiusTop + 'px',
                                borderTopRightRadius: config.pageConfig.radiusTop + 'px',
                                borderBottomLeftRadius: config.pageConfig.radiusBottom + 'px',
                                borderBottomRightRadius: config.pageConfig.radiusBottom + 'px',
                            }">
                            <img :style="{
                                    borderTopLeftRadius: config.pageConfig.radiusTop + 'px',
                                    borderTopRightRadius: config.pageConfig.radiusTop + 'px',
                                    borderBottomLeftRadius: config.pageConfig.radiusBottom + 'px',
                                    borderBottomRightRadius:
                                        config.pageConfig.radiusBottom + 'px',
                                }" v-if="config.pageConfig.imgList[idx].imgUrl" :src="config.pageConfig.imgList[idx].imgUrl"
                                class="banner-img" alt="" />
                            <img :style="{
                                    borderTopLeftRadius: config.pageConfig.radiusTop + 'px',
                                    borderTopRightRadius: config.pageConfig.radiusTop + 'px',
                                    borderBottomLeftRadius: config.pageConfig.radiusBottom + 'px',
                                    borderBottomRightRadius:
                                        config.pageConfig.radiusBottom + 'px',
                                }" v-else src="../../../../../../assets/app/bar/default_banner.png" class="banner-img" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: "Information",
};
</script>
<script lang="ts" setup>
import { reactive, onMounted } from "vue";
const config = defineProps({
    pageConfig: {
        type: Object,
        default: {
            custom: "1",
            color: "transparent",
            marginTop: 0,
            marginBottom: 0,
            marginImg: 0,
            margin: 0,
            radiusTop: 0,
            radiusBottom: 0,
            imgList: [
                {
                    imgUrl: "",
                    name: "",
                    url: "",
                },
            ],
        },
    },
});
console.log(config.pageConfig);
let emits = defineEmits<{ (e: "close", flag: boolean): void }>();
</script>
<style lang="scss" scoped>
.banner {
    width: 100%;
    overflow: hidden;
}

.img {
    .banner-container {
        >div {
            box-sizing: border-box;

            img {
                width: 100%;
                display: block;
            }
        }
    }
}

.style-2.banner-container {
    display: flex;
    flex-wrap: wrap;

    >div {
        box-sizing: border-box;
        width: 50%;

        >div {
            .banner-img {
                width: 100%;
            }
        }
    }
}
</style>
